<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="myApp">
    <!--v-show 会使用样式影藏dom结构-->
    <h1 v-show="show">哈哈哈</h1>
    <!--v-if 会直接根据条件添加和删除dom元素-->
    <h1 v-if="show">呵呵呵</h1>
    <button @click="showOrHide">点击</button>
    <br>

    <!--v-for 迭代集合数据   可以使用 :key 提高性能-->
    <ul>
        <li v-for="(name,index) of list" :key="index" v-text="name"></li>
    </ul>


</div>
</body>
<script>
    new Vue({
        el: "#myApp",
        data: {
            show: true,
            list: ["张三", "李四", "王五"]
        },
        methods: {
            showOrHide: function () {
                this.show = !this.show;
            }
        }
    })
</script>
</html>